<template>
	<div class="contentMain" @click="closeTpis">
		<header></header>
		<!-- <div class="department_container" :style='{height: heightClient}'> -->
		<div class="department_container">
			<div class="container">
				<header>
					<div class="header_left">
						<el-button v-for="item in selectedPerson" class="person-btn">{{item.name}}<span class="icon" @click="deletePerson(item)"></span></el-button>
						<el-button v-show="!ppp" @click.stop="personClick" class="add-person">+添加人员</el-button>
						<!-- 选择人员 -->
						<div class="header_person" v-show="peopleShow" @click.stop="stopBubble">
							<div class="person_left">
								<span @click="peopleClick(item)" v-for="item in department" :class="{actives: item.show}" v-if="kai">
									{{item.name}}
								<i class="el-icon-arrow-right" style="position: absolute;right: 5px; margin-top: 15px;"></i>
								</span>
								
							</div>
							<div class="person_right">
								<!-- <div class="right_title">
									<el-button @click="sureClick">确定</el-button>
								</div> -->
								<div class="item" v-for="item in departmentUser">
									<div>
										<div>{{item.eligibilityName}}</div>
										<el-checkbox-group v-model="dtUserChecked" :max="2" @change="checkbox_click(item)">
    										<el-checkbox v-for="itm in item.record" :label="itm.id" :key="itm.id" >{{itm.name}}</el-checkbox>
					  					</el-checkbox-group>	
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="header_right" :style="{width: titleInput}" @click.stop="stopBubble">
						<span>参考人：</span>
	  					<el-radio-group v-model="radio" @change="handleChangeRadio">
						    <el-radio label='hospital'>全院</el-radio>
						    <el-radio label='department' :disabled="!dtUserChecked.length">同科室</el-radio>
						    <el-radio label='specifyTitle'>指定职称</el-radio>
						</el-radio-group>
						<el-input
							style="display: inline-block;width: 120px;height: 30px;margin-left: 30px;"
							size="mini"
    						placeholder="请选择职称"
    						v-model="selectTitle"
    						v-if="titleFocus"
    						@focus="showTitle"
    						@clear="clearTitle"
    						clearable>
    						<i slot="suffix" class="el-icon-arrow-down"></i>
  						</el-input>	
						<el-checkbox-group v-model="checkedList" @change="handleChangeChecked" style="display: inline-block; background: #E8EFF8;margin-left: 10px;" :disabled="(!dtUserChecked.length || titleSelected)">
						    <el-checkbox label="age" style="margin-left: 10px;">同工龄</el-checkbox>
						    <el-checkbox label="eligibilityName">同职称</el-checkbox>
						    <el-checkbox label="plait">同编制</el-checkbox>
						    <el-checkbox label="degree">同学位</el-checkbox>
						    <el-checkbox label="education" style="margin-right: 10px;">同学历</el-checkbox>
					  	</el-checkbox-group>
					  	<div class="specifyTitle"  @click.stop="stopBubble" v-if="titleVisiable">
							<div class="title_left">
								<span @click="rankClick(item)" v-for="item in rankList" :class="{actives: item.show}">
									{{item.name}}
									<i class="el-icon-arrow-right" style="margin-left: 70px"></i>
								</span>
							</div>
							<div class="title_right">
								<el-radio-group v-model="selectTitle" @change="changeTitleRadio">
									<el-radio  v-for="item in specifyTitle" :label="item" class="item">{{item}}</el-radio>   
								</el-radio-group> 
							</div>
							<div class="title-bottom">仅显示有人员职称</div>
						</div>
					</div>
				</header>
				<div class="list">
					<div class="title">
						<div class="title_item">
							<span>本月绩效</span>
							<span class="Line">|</span>
							<span>近3月平均绩效</span>
						</div>
						<div class="title_item">
							<span>环比绩效</span>
							<span class="Line">|</span>
							<span>百分比</span>
						</div>
						<div class="title_item">
							<span>同比绩效</span>
							<span class="Line">|</span>
							<span>百分比</span>
						</div>
						<div class="title_item">
							<span>异常分析</span>
						</div>
					</div>
					<div class="list_content" v-for="item in person" v-if="kaio">
						<div class="content_item" @mouseover="personOver(item)" @mouseout="personOut(item)">
							<span style="font-weight: normal;">{{item.name}}</span><br>
							<span style="font-weight: normal;">{{item.eligibilityName}}</span>
							<div class="fuchuang" v-show="item.show" v-if="kai">
								<span class="department">{{item.department}}</span>
								{{item.name}}<br>
								{{item.eligibilityName}}<br>
								性别: {{item.gender}}<br>
								工龄: {{item.age}}<br>
								学历: {{item.education}}
							</div>
						</div>
						<div class="content_item">
							<span>{{item.perTotalNum | TransformationNumber}}</span>
							<span>{{item.threeMonthPerAverageNum | TransformationNumber}}</span>
						</div>
						<div class="content_item">
							<span>{{item.lastMonthPerTotalNum}}</span>
							<span :style="{color: item.lastMonthTrend == 'desc' ?'#89D769':'#EC7676'}">{{item.lastMonthPercentage}}
								<span v-if="item.lastMonthTrend == 'asc'">&nbsp;<img src="./../assets/asc.png"></span>
								<span v-else="item.lastMonthTrend == 'desc'">&nbsp;<img src="./../assets/desc.png"></span>
							</span>
						</div>
						<div class="content_item">
							<span>{{item.samePeriodPerTotalNum}}</span>
							<span :style="{color: item.samePeriodTrend == 'desc' ?'#89D769':'#EC7676'}">{{item.samePeriodPercentage}}
								<span v-if="item.samePeriodTrend == 'asc'">&nbsp;<img src="./../assets/asc.png"></span>
								<span v-else="item.samePeriodTrend == 'desc'">&nbsp;<img src="./../assets/desc.png"></span>
							</span>
						</div>
						<div class="content_item">
							<span v-if="item.AnomalyAnalysis == '正常'" style="color: #B0B0B0 ">——</span>
							<span v-else="item.AnomalyAnalysis == '异常'" class="flagErr"></span>
						</div>
					</div>
					<div class="guding" >
						
						<div class="content_item item_special" @mouseover="titleOver()" @mouseout="titleOut()" >
							<span>参考人</span><br>
							<div class="title-fuchuang" v-show="fuchuangTitleShow">
								<div class="title-top">
									参考人<span>（筛选条件）</span>
								</div>
								<div class="title-left">
									{{titleLeft}}：
								</div>
								<ul class="title-right">
									<li v-for="item in checkTilte">{{item}}</li>
								</ul>
								<!-- <span class="department">{{item.department}}</span> -->
								
							</div>
						</div>
						<div class="content_item">
							<span>{{referencePerson.info.perTotalNum | TransformationNumber}}</span>
							<span>{{referencePerson.info.threeMonthPerAverageNum | TransformationNumber}}</span>
						</div>
						<div class="content_item">
							<span>{{referencePerson.info.lastMonthPerTotalNum}}</span>
							<span :style="{color: referencePerson.info.samePeriodTrend == 'desc' ?'#89D769':'#EC7676'}">{{referencePerson.info.lastMonthPercentage}}</span>
							<span v-if="referencePerson.info.samePeriodTrend == 'asc'"><img src="./../assets/asc.png"></span>
							<span v-else="referencePerson.info.samePeriodTrend == 'desc'"><img src="./../assets/desc.png"></span>
						</div>
						<div class="content_item">
							<span>{{referencePerson.info.samePeriodPerTotalNum}}</span>
							<span :style="{color: referencePerson.info.samePeriodTrend == 'desc' ?'#89D769':'#EC7676'}">{{referencePerson.info.samePeriodPercentage}}</span>
							<span v-if="referencePerson.info.samePeriodTrend == 'asc'"><img src="./../assets/asc.png"></span>
							<span v-else="referencePerson.info.samePeriodTrend == 'desc'"><img src="./../assets/desc.png"></span>
						</div>
						<div class="content_item">
						</div>
					</div>
				</div>
				<div style="height: calc(90% - 350px)">
					<div class="echarts_title">绩效趋势对比</div>
					<div ref="trand" style="height: calc(100% - 50px); width: 100%;"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import axios from 'axios'
import echarts from 'echarts'
export default {
	props: ['month'],
	watch: {
		month (newV, oldV) {
			this.month = newV
			// this.ppp = false
			this.getPersonnelAnalyse()
		},
	},
	data () {
		return {
			ppp: false,
			checkedList: [],//选择参考人范围
			oldCheckedList: [],//选择参考人范围原值
			dtUserChecked: [],//科室被选中的人
			fuchuangTitleShow: false,
			rankList: [
			{name: '高级',show: true},
			{name: '副高',show: false},
			{name: '中级',show: false},
			{name: '初级',show: false},
			{name: '其他',show: false},
			],//职称等级
			specifyTitle: [],
			selectTitle: '',
			titleInput: '850px',//初始化长度
			titleFocus: false, //默认选择框不显示
			titleVisiable: false,
			titleLeft: '全院',//初始化全院
			court: true,//全院选中或科室选中
			titleSelected: false,
			checkTilte: [],//参考人职称条件选择
			// checkTilte: [
			// 	{
			// 		key: 'age',
			// 		name: '同工龄'
			// 	},{
			// 		key: 'eligibilityName',
			// 		name: '同职称'
			// 	},{
			// 		key: 'plait',
			// 		name: '同编制'
			// 	},{
			// 		key: 'degree',
			// 		name: '同学位'
			// 	},{
			// 		key: 'education',
			// 		name: '同学历'
			// 	}
			// ],//参考人职称条件选择
			dt: false,
			radio: 'hospital', //单选框绑定值
			oldRadio: 'hospital', //单选框旧值
			radioClick: true,
			referencePerson: {
				info: {
					threeMonthPerAverageNum: "247.83", //近3月平均绩效
					perTotalNum: "290.80", //本月绩效
					lastMonthPerTotalNum: "33.00", //上月绩效金额
					lastMonthTrend: "asc", //上月绩效趋势
					lastMonthPercentage: "781.21%", //上月绩效幅度百分比
					samePeriodPerTotalNum: "34.00", //同期绩效金额
					samePeriodTrend: "asc", //同期绩效趋势
					samePeriodPercentage: "755.29%" //同期绩效幅度百分比
				}
			},
			//参考人信息
			cankaoObj: {
       			hospital: '1', //全院
       			department: '0', //同科室
       			age: '0', //同工龄
       			education: '0', //同学历
       			degree: '0', //同学位
       			eligibilityName: '0', //同资格
       			plait: '0', //同编制
       			specifyTitle:" ", //指定职称
    		},
			cankao: [
				{
					name: '同工龄',
					value: 'age'
				},
				{
					name: '同职称',
					value: 'eligibilityName'
				},
				{
					name: '同编制',
					value: 'plait'
				},
				{
					name: '同学位',
					value: 'degree'
				},
				{
					name: '同学历',
					value: 'education'
				}
			],
			kai: true,
			selectedPerson: [],
			person: [],
			
			options: {
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:[{name: '张三'},{name: '参考人'}],
			        bottom: '15%'
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        top: '6%',
			        bottom: '25%',
			        containLabel: true
			    },
			    // toolbox: {
			    //     feature: {
			    //         saveAsImage: {}
			    //     }
			    // },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: ['2017.05'],
			        axisTick: {
			        	show: false
			        },
			        axisLine: {
			        	show: false
			        },
			        axisLabel: {
			        	interval: 0
			        }
			    },
			    yAxis: {
			        type: 'value',
					axisLabel: {
			          formatter: function(value){
			            if (parseInt(value) > 1000) {
		                		return parseInt(value)/1000 + 'K'
		                	} else 
		                	return value
			          }
			        },
			        axisTick: {
			        	show: false
			        },
			        axisLine: {
			        	show: false
			        },
			        splitLine: {
			        	lineStyle: {
			        		type: 'dashed',
			        		color: '#E6E6E6'
			        	}
			        }
			    },
			    series: [
			    	{
			            name:'张三',
			            type:'line',
			            // stack: '总量',
			            data:[234, 290, 330, 310, 120,120, 132, 101, 134, 90, 230, 210],
			            itemStyle: {
			            	normal: {
			            		color: '#72C2F1'
			            	}
			            }
			        },
			        
			        {
			            name:'参考人',
			            type:'line',
			            // stack: '总量',
			            data:[150, 232, 201, 154, 110, 232, 201, 154, 20, 232, 201, 154, 190, 330, 410],
			            itemStyle: {
			            	normal: {
			            		color: '#ccc'
			            	}
			            }
			        }
			    ]
			},
			options_zero: {
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:[{name: '参考人'}],
			        bottom: '15%'
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        top: '6%',
			        bottom: '25%',
			        containLabel: true
			    },
			    // toolbox: {
			    //     feature: {
			    //         saveAsImage: {}
			    //     }
			    // },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: ['2017.05','2017.06','2017.07','2017.08','2017.09','2017.10','2017.11','2017.12','2018.01','2018.02','2018.03','2018.04','2018.05'],
			        axisTick: {
			        	show: false
			        },
			        axisLine: {
			        	show: false
			        }
			    },
			    yAxis: {
			        type: 'value',
			        axisTick: {
			        	show: false
			        },
			        axisLine: {
			        	show: false
			        },
			        splitLine: {
			        	lineStyle: {
			        		type: 'dashed',
			        		color: '#E6E6E6'
			        	}
			        }
			    },
			    series: [
			        {
			            name:'参考人',
			            type:'line',
			            // stack: '总量',
			            data:[150, 232, 201, 154, 110, 232, 201, 154, 20, 232, 201, 154, 190, 330, 410],
			            itemStyle: {
			            	normal: {
			            		color: '#ccc'
			            	}
			            }
			        }
			    ]
			},
			options_two: {
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:[{name: '张三'},{name: '李四'},{name: '参考人'}],
			        bottom: '15%'
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        top: '6%',
			        bottom: '25%',
			        containLabel: true
			    },
			    // toolbox: {
			    //     feature: {
			    //         saveAsImage: {}
			    //     }
			    // },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: ['2017.05','2017.06','2017.07','2017.08','2017.09','2017.10','2017.11','2017.12','2018.01','2018.02','2018.03','2018.04','2018.05'],
			        axisTick: {
			        	show: false
			        },
			        axisLine: {
			        	show: false
			        }
			    },
			    yAxis: {
			        type: 'value',
			        axisTick: {
			        	show: false
			        },
			        axisLine: {
			        	show: false
			        },
			        splitLine: {
			        	lineStyle: {
			        		type: 'dashed',
			        		color: '#E6E6E6'
			        	}
			        }
			    },
			    series: [
			    	{
			            name:'张三',
			            type:'line',
			            // stack: '总量',
			            data:[234, 290, 330, 310, 120,120, 132, 101, 134, 90, 230, 210],
			            itemStyle: {
			            	normal: {
			            		color: '#72C2F1'
			            	}
			            }
			        },
			        {
			            name:'李四',
			            type:'line',
			            // stack: '总量',
			            data:[234, 290, 330, 310, 120,120, 132, 101, 134, 90, 230, 210],
			            itemStyle: {
			            	normal: {
			            		color: '#F5A623'
			            	}
			            }
		        	},
			        {
			            name:'参考人',
			            type:'line',
			            // stack: '总量',
			            data:[150, 232, 201, 154, 110, 232, 201, 154, 20, 232, 201, 154, 190, 330, 410],
			            itemStyle: {
			            	normal: {
			            		color: '#ccc'
			            	}
			            }
			        }
			    ]
			},
			department: [],
			departmentUser: [],
			kai: true,
			userArray: [],
			peopleShow: false,
			heightClient: '0px',
			kaio: true,
			initTime: '2018-05',
			fullscreenLoading: false
		}
	},
	created () {
		this.getPersonnelAnalyse()    
		this.heightClient = document.body.clientHeight - 100 + 'px'
		this.a = false
		this.a = true
	},
	methods: {
		closeTpis(){ //关闭添加人员弹窗。
			this.peopleShow = false
			this.titleVisiable = false
		},
		changeTitleRadio (item) {
			this.selectTitle = item
			this.titleVisiable = false
			this.cankaoObj['specifyTitle'] = item
			this.checkTilte = []
			this.checkTilte.push(item)
			this.getPersonnelAnalyse()
		},
		showTitle () {
			this.titleVisiable = true
			this.peopleShow = false
			this.radio = 'specifyTitle'
			this.getEligibilityName()
		},
		clearTitle () {
			this.selectTitle = ''
			this.cankaoObj['specifyTitle'] = ''
			this.getPersonnelAnalyse()
		},
		rankClick(item) {
			this.radio = 'specifyTitle'
			this.rankList.forEach((item) => {
				item.show = false
			})
			item.show = true
			this.getEligibilityName()
		},
		titleOver () {
			this.fuchuangTitleShow = true
		},
		titleOut () {
			this.fuchuangTitleShow = false
		},
		getEligibilityName () {
			var qs = require('qs')
			var self = this
			axios.post('/service', qs.stringify({"data": JSON.stringify({
              command: 'getEligibilityName',
              platform: 'web',
              monthTime: self.month
             })}), {
              headers: {
               "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              }
             }).then(function (rep) {
              if (rep.data.statusCode === '10001') {
              	var rank = ''
              	var eligibilityName = rep.data.data.eligibilityName
              	self.rankList.forEach((item) => {
              		if(item.show == true) {
              			rank = item.name
              		}
              	})
              	eligibilityName.forEach((item) => {
              		if(item.level == rank) {
              			self.specifyTitle = item.eligibility_name
              		}
              	})
              }
             }).catch(function (error) {
              // console.log(error);
            })
		},
		openFullScreen() {
			const loading = this.$loading({
          		lock: true,
          		text: 'Loading',
          		spinner: 'el-icon-loading',
          		background: 'rgba(255, 255, 255, 0)'
        	});
      	},
      	closeFullScreen() {
      		const loading = this.$loading({
          		lock: true,
          		text: 'Loading',
          		spinner: 'el-icon-loading',
          		background: 'rgba(255, 255, 255, 0)'
        	});
      		setTimeout(() => {
          		loading.close();
        	}, 0);
      	},
		checkbox_click (item) {
			console.log(this.dtUserChecked)
			this.sureClick()
			// this.dtUserChecked.push(item.record)
		},
		getReferencePersonnelAnalyse () {
			var qs = require('qs')
			var self = this
			this.openFullScreen()
			axios.post('/service', qs.stringify({"data": JSON.stringify({
              command: 'referencePersonnelAnalyse',
              platform: 'web',
              monthTime: self.month
             })}), {
              headers: {
               "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              }
             }).then(function (rep) {
              if (rep.data.statusCode === '10001') {
              	//初始化信息数据
              	self.selectedPerson = []
              	self.person = []
              	self.dtUserChecked = []
              	self.radio = 'hospital'
              	self.ppp = false
              	let perMonthUser = rep.data.data.perMonthUser
              	//初始化信息数据
				self.options_zero.xAxis.data =  perMonthUser.referencePerson.monthTrend.xData
				self.options_zero.series[0].data = perMonthUser.referencePerson.monthTrend.yData
				self.myChart = echarts.init(self.$refs.trand)
				self.myChart.clear()
				self.myChart.setOption(self.options_zero)
				self.closeFullScreen()
				} else if (rep.data.statusCode === '10003'){
					self.closeFullScreen()
              	 	self.$router.push('/login')
              }
             }).catch(function (error) {
              // console.log(error);
            })
		},
		//处理单选框
		handleChangeRadio (item) {
			this.cankaoObj['hospital'] = 0
			this.cankaoObj['department'] = 0
			this.checkedList = []
			this.cankaoObj['age'] = 0
			this.cankaoObj['education'] = 0
			this.cankaoObj['degree'] = 0
			this.cankaoObj['plait'] = 0
			this.cankaoObj['eligibilityName'] = 0
			this.checkTilte = []
			if(item == 'hospital') {
				this.cankaoObj['hospital'] = 1
				this.cankaoObj['specifyTitle'] = ''
				this.oldRadio = 'department'
				this.titleLeft = '全院'
				this.titleInput = '850px'
				this.titleFocus = false
				this.titleSelected = false
				this.titleVisiable = false
				this.selectTitle = ''
				this.getPersonnelAnalyse()
			} else if(item == 'department') {
				this.cankaoObj['department'] = 1
				this.cankaoObj['specifyTitle'] = ''
				this.oldRadio = 'hospital'
				this.titleLeft = '全科室'
				this.titleInput = '850px'
				this.titleFocus = false
				this.titleSelected = false
				this.selectTitle = ''
				this.getPersonnelAnalyse()
			} else if (item == 'specifyTitle') {
				this.titleInput = '1000px'
				this.titleFocus = true
				this.titleLeft = '指定职称'
				this.titleSelected = true
				this.peopleShow = false
			}
			this.radioClick = true
			
		},
		//处理多选框参考人选择
		handleChangeChecked (item) {
			var self = this
			this.radioClick = false
			this.cankaoObj['age'] = 0
			this.cankaoObj['education'] = 0
			this.cankaoObj['degree'] = 0
			this.cankaoObj['plait'] = 0
			this.cankaoObj['eligibilityName'] = 0
			self.checkTilte = []
			self.checkedList.forEach((item,index) => {
				self.cankaoObj[item] = 1;
				self.cankao.forEach((itm,index) => {
					if(itm.value == item) {
						self.checkTilte.push(itm.name)
					}
				})
			})
			self.oldCheckedList = self.checkedList.slice(0,-1)
			self.getPersonnelAnalyse()
		},
		personClick () {
			var qs =require('qs')
			var This = this
			this.peopleShow = true
			axios.post('/service', qs.stringify({"data": JSON.stringify({
              command: 'getDepartment',
              platform: 'web',
              monthTime: This.month
             })}), {
              headers: {
               "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              }
             }).then(function (rep) {
              if (rep.data.statusCode === '10001') {
              	//科室信息
				This.department = rep.data.data.department
				}
             }).catch(function (error) {
              // console.log(error);
            })
		},
		deletePerson (item) {
				this.selectedPerson.forEach((itm,index) => {
					if(itm.name === item.name){
						this.selectedPerson.splice(index,1)
						this.dtUserChecked.splice(index,1)
						this.ppp = false
					}
					
				})	
				
			this.getPersonnelAnalyse()
		},
		sureClick () {
			this.peopleShow = false
			// var myChart = echarts.init(self.$refs.trand)
			// myChart.setOption(options,true)
			this.getPersonnelAnalyse()
		},
		//获取个人分析数据
		getPersonnelAnalyse () {
			var self = this
			var qs = require('qs')
			this.openFullScreen()
			axios.post('/service', qs.stringify({"data": JSON.stringify({
              	command: 'personnelAnalyse',
              	platform: 'web',
              	monthTime: self.month,
              	userIds: self.dtUserChecked,
              	data: self.cankaoObj
             })}), {
            headers: {
               "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              }
             }).then(function (rep) {
              if (rep.data.statusCode === '10001') {
              	//科室人员信息
				let check_array = []
				let perMonthUser = rep.data.data.perMonthUser
				self.referencePerson = perMonthUser.referencePerson//参考人信息
				self.person = perMonthUser.choosePerson.info//选择人员信息
				self.person.forEach((items) => {
					let obj = {
						name: '',
					}
					obj.name = items.name
					check_array.push(obj)
				})
				self.selectedPerson = check_array
				if(self.person.length > 1) {
					self.ppp = true
				}
				if(self.dtUserChecked.length === 0) {
			        self.options_zero.xAxis.data =  perMonthUser.referencePerson.monthTrend.xData
					self.options_zero.series[0].data = perMonthUser.referencePerson.monthTrend.yData
			        self.myChart = echarts.init(self.$refs.trand)
			        self.myChart.clear()
					self.myChart.setOption(self.options_zero)
					// self.getReferencePersonnelAnalyse()
				} else if(self.dtUserChecked.length === 1) {
					// self.options.xAxis.data =  perMonthUser.choosePerson.monthTrend[0].xData
					let referenceLength = perMonthUser.referencePerson.monthTrend.xData.length
					let chooseLength = perMonthUser.choosePerson.monthTrend[0].xData.length
					if(referenceLength > chooseLength) {
						self.options.xAxis.data =  perMonthUser.referencePerson.monthTrend.xData
					} else {
						self.options.xAxis.data =  perMonthUser.choosePerson.monthTrend[0].xData
					}
					self.options.series[0].data = perMonthUser.choosePerson.monthTrend[0].yData
					self.options.series[1].data = perMonthUser.referencePerson.monthTrend.yData
					self.options.series[0].name =  perMonthUser.choosePerson.monthTrend[0].name
					self.options.legend.data[0].name =  perMonthUser.choosePerson.monthTrend[0].name
					self.myChart = echarts.init(self.$refs.trand)
					self.myChart.clear()
					self.myChart.setOption(self.options)
				} else {
					// self.options_two.xAxis.data =  perMonthUser.choosePerson.monthTrend[0].xData
					let referenceLength = perMonthUser.referencePerson.monthTrend.xData.length
					let chooseLength = perMonthUser.choosePerson.monthTrend[0].xData.length
					if(referenceLength > chooseLength) {
						self.options_two.xAxis.data =  perMonthUser.referencePerson.monthTrend.xData
					} else {
						self.options_two.xAxis.data =  perMonthUser.choosePerson.monthTrend[0].xData
					}
					self.options_two.series[0].data = perMonthUser.choosePerson.monthTrend[0].yData
					self.options_two.series[1].data = perMonthUser.choosePerson.monthTrend[1].yData
					self.options_two.series[2].data = perMonthUser.referencePerson.monthTrend.yData
					self.options_two.series[0].name =  perMonthUser.choosePerson.monthTrend[0].name
					self.options_two.series[1].name =  perMonthUser.choosePerson.monthTrend[1].name
					self.options_two.legend.data[0].name =  perMonthUser.choosePerson.monthTrend[0].name
					self.options_two.legend.data[1].name =  perMonthUser.choosePerson.monthTrend[1].name
					self.myChart = echarts.init(self.$refs.trand)
					self.myChart.clear()
					self.myChart.setOption(self.options_two)
				}
				self.closeFullScreen()
				} else if (rep.data.statusCode === '00005') {
					alert(rep.data.msg)
					self.closeFullScreen()
					self.checkTilte = []
					if(self.radioClick == true) {
						self.radio = 'hospital'
					} else {
						self.checkedList = self.oldCheckedList
					}
					for (var Key in self.cankaoObj){
						self.cankaoObj[Key] = 0;
					}
					self.oldCheckedList.forEach((item,index) => {
						self.cankaoObj[item] = 1;
					})
					// if(self.oldRadio == 'hospital') {
					// 	self.cankaoObj['hospital'] = 1
					// } else if(item == 'department') {
					// 	self.cankaoObj['department'] = 1
					// }
					// self.getPersonnelAnalyse()
				} else if(rep.data.statusCode === '00001') {
					// alert(rep.data.msg)
					self.closeFullScreen()
				}
             }).catch(function (error) {
              	
            })
		},
		peopleClick (item) {
			this.department.forEach((item) => {
				item.show = false
			})
			// if (item.name === '杜春红') {
			// 	item.show = false
			// } else {
			item.show = true
					
			this.kai = false
			this.kai = true
			this.getDepartmentPersonnel(item)
		},
		personOver(item) {
			// alert(11)
			item.show = true
			this.kai = false
			this.kai = true
		},
		personOut (item) {
			item.show = false
			this.kai = false
			this.kai = true
		},
		//获取科室下人员信息
		getDepartmentPersonnel (item) {
			var qs = require('qs')
			var self = this
			axios.post('/service', qs.stringify({"data": JSON.stringify({
              command: 'getDepartmentPersonnel',
              platform: 'web',
              depId: item.id,
              monthTime: self.month
             })}), {
              headers: {
               "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              }
             }).then(function (rep) {
              if (rep.data.statusCode === '10001') {
              	//科室人员信息
				self.departmentUser = rep.data.data.departmentUser
				
				}
             }).catch(function (error) {
              // console.log(error);
            })
		},
		
		stopBubble(){ //阻止弹窗冒泡。

		}
	},
	filters:{
		TransformationNumber:function(vaule){
			var num = vaule;
			num = num.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
			return num;
		}
	}
	// mounted () {
	// 	this.myChart = echarts.init(this.$refs.trand)
	// 	this.myChart.setOption(this.options)
	// }
}
</script>
<style lang="scss" scoped>
	.contentMain{
		height:100%;
		
		padding-top: 0;
		background: #f8f8f8;
	}
	header {
		width: 100%;
		background: #fff;
		padding-bottom: 32px;
	}
	.department_container{
		padding: 1.4%;
		height: calc(100% - 40px) ;
		padding-top: 20px;
		padding-bottom: 20px;
		overflow: hidden;
		.container{
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0 auto;
			background: #fff;
			box-shadow: 0 2px 8px 0 rgba(0,0,0,0.17);
			header{
				height: 27px;
				width: 100%;
				padding: 1% 0;
				border-bottom: 10px solid #f8f8f8;
				.header_left {
					float: left;
					width: 300px;
					position: relative;
					bottom: 8px;
					margin-left: 1%;
					.add-person {
						border: 1px dashed #3AC157;
						color: #3AC157;
						font-size: 15px;
						&:hover {
							background: #D0F5D8;
						}
					}
					.person-btn {
						background-color: #B8D7F8;
						font-family: PingFangSC-Regular;
						font-size: 17px;
						color: #333333;
					}
					.icon {
						width: 15px; 
						height: 15px;
						float: right;
						position: relative; 
						top: -17px; right: -25px;
						background: url('./../assets/closeDefault.svg'); 
						background-size:100% 100%; 
						&:hover{
							background: url('./../assets/closeChecked.svg'); 
						}
					}
					.header_person{
						position: absolute;
						left: 30px;
						top: 42px;
						z-index: 1000;
						border: 2px solid #eee;
						width: 720px;
						height: 550px;
						display: flex;
						justify-content: flex-start;
						.person_left{
							background: #fff;
							width: 200px;
							padding: 5px 0 10px 0;
							overflow-y: scroll;
							position: relative; 
							span{
								display: inline-block;
								height: 46px;
								width: 100%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								line-height: 46px;
								font-size: 16px;
								text-indent: 20px;
								color: #4D4D4D;
								cursor: pointer;
								overflow: hidden;
								text-overflow: ellipse;
								&:hover{
									background-color: #E9F1F8;
									height: auto;
									white-space: normal; 
									overflow: auto;
								}
							}
						}
						.person_right{
							flex: 1;
							background: #FAFAFA;
							overflow-y: auto;
							padding: 20px 0;
							.right_title{
								height: 54px;
								border-bottom: 2px solid #E5E5E5;
								margin-bottom:21px;
								.el-button{
									width: 75px;
									height: 28px;
									line-height: 28px;
									float: right;
									background: #4FAAF2;
									color: #fff;
									padding: 0;
									border-color: #4FAAF2;
									margin-top: 13px;
									margin-right: 10px;
									&:hover{
										background-color: #6EBBF7;
									}
								}
							}
							.choose_zhi{
								// padding-left: 20px;
								height: 50px;
								.el-button{
									width: 37px;
									height: 30px;
									background: #72B8EF;
									color: #fff;
									border-color: #72B8EF;
									padding: 0;
									border-radius: 0;
									margin-top: 10px;
									font-size: 14px;
								}
							}
							.item{
								div {
									
									padding-left: 15px;
									div {
										font-family: '微软雅黑,PingFangSC';
										font-size: 14px;
										color: #4D4D4D;
										font-weight: 600;
										min-height: 40px;
    									line-height: 30px;
										
									}
									.el-checkbox {
    									margin-left: 30px;
											width: 80px;
											&:hover{
												color:#409EFF;
											}
									}
									// li{
									// 	span{
									// 		width: 13px;
									// 		height: 13px;
									// 		border: 1px solid #ddd;
									// 		display: inline-block;
									// 		line-height: 30px;
									// 		margin-right: 5px;
									// 	}
									// 	width: 100px;
									// 	height: 40px;
									// 	float: left;
									// 	cursor: pointer;
									// 	color: #4D4D4D;
									// 	line-height: 40px;
									// }
								}
						}
						}
						
					}
					.el-button{
						margin-left: 30px;
					}
					// .el-button:nth-child(1){
					// 	font-size: 17px;
					// 	color: #333;
					// }

					.el-button:last-child{
						border: 1px dashed #6AD782;
						color: #6AD782;
					}
				}
				.header_right{
					float: right;
					width: 1000px;
					height: 40px;
					line-height: 40px;
					margin-right: 10px;
					padding-left: 10px;
					position: relative;
					bottom: 2px;
					span{
						float: left;
					}
					.specifyTitle{
						position: absolute;
						right: 50px;
						top: 42px;
						z-index: 1000;
						border: 2px solid #eee;
						width: 600px;
						height: 300px;
						display: flex;
						justify-content: flex-start;
						.title_left{
							background: #fff;
							width: 180px;
							padding: 15px 0 10px 0;
							span{
								display: inline-block;
								height: 46px;
								width: 100%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								line-height: 46px;
								font-size: 16px;
								text-indent: 20px;
								color: #4D4D4D;
								cursor: pointer;
								overflow: hidden;
								text-overflow: ellipse;
								&:hover{
									background-color: #E9F1F8;
									height: auto;
									white-space: normal; 
									overflow: auto;
								}
							}
						}
						.title_right{
							flex: 1;
							background: #FAFAFA;
							overflow-y: auto;
							padding: 15px 0 35px 0;
							
							.item{
								width: 35%;
								padding: 6px;
								&:first-child {
									margin-left: 30px;
								}	
							}
						}
						.title-bottom {
							position: absolute;
							bottom: 0;
							width: 100%;
							height: 25px;
							line-height: 25px;
							background: #FFFFFF;
							font-family: '微软雅黑,PingFangSC';
							font-size: 12px;
							color: #8A8A8A;
							letter-spacing: 0;
							text-align: center;
							border-top: 1px solid #eee;
						}
						
					}
					
				}
			}
			.actives{
				background: #DCEDFC !important;
			}
			.list{
				border-bottom: 1px solid #ddd;
				.list_content, .title{
					width: 94%;
					margin: 0 auto;
					border-bottom: 1px solid #eee;
				}
				.guding{
					width: 94%;
					margin: 0 auto;
				}
				.list_content, .guding{
					height: 65px;
					.item_special{
						line-height: 65px !important;
						.title-fuchuang{
							position: absolute;
							width: 160px;
							min-height: 35px;
							color: #fff;
							font-size: 12px !important;
							left: 35%;
							top: 10%;
							z-index: 100;
							background: rgba(72, 84 , 101, .9);
							line-height: 25px;
							padding-left: 10px;
							.title-top {
								font-size: 14px;
								color: #fff;
								span {
									font-size: 12px !important;
									color: #fff;
								}
							}
							.title-left {
								float: left;
							}
							.title-right {
								float: left;
								margin-left: 10px;
								font-size: 12px !important;
								color: #fff;
							}
							// .department{
							// 	display: inline-block;
							// 	width: 80px;
							// 	height: 20px;
							// 	position: absolute;
							// 	right: 10px;
							// 	line-height: 20px !important;
							// 	overflow: hidden;
							// 	text-overflow: ellipsis;
							// 	white-space: nowrap;
							// 	margin: 3px 0 0 0;
							// 	background: #63AEE8;
							// 	color: #fff;
							// 	font-size: 11px !important;
							// 	border: none;
							// 	padding: 0px 3px 0px 2px;
							// 	&:hover {
							// 		height: auto;
							// 		white-space: normal; 
							// 		overflow: auto;
							// 	}
							// }

						}
						// .fuchuang:before{
				  //            position: absolute;
				  //            content: "";
				  //            width: 0;
				  //            height: 0;
				  //            right: 100%;
				  //            top: 40%;
				  //            border-top: 6px solid transparent;
				  //            border-right: 10px solid #485465;
				  //            border-bottom: 6px solid transparent;
				  //       } 
					}
					.content_item{
						float: left;
						width: 20%;
						line-height: 65px;
						font-size: 20px;
						position: relative;
						.fuchuang{
							position: absolute;
							width: 160px;
							height: 135px;
							color: #fff;
							font-size: 12px !important;
							left: 35%;
							top: -30%;
							z-index: 100;
							background: rgba(72, 84 , 101, .9);
							line-height: 25px;
							padding-left: 10px;
							.department{
								display: inline-block;
								width: 80px;
								height: 20px;
								position: absolute;
								right: 10px;
								line-height: 20px !important;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								margin: 3px 0 0 0;
								background: #63AEE8;
								color: #fff;
								font-size: 11px !important;
								border: none;
								padding: 0px 3px 0px 2px;
								&:hover {
									height: auto;
									white-space: normal; 
									overflow: auto;
								}
								// &:before{
								// 	content: "";
								// 	position: absolute;
								// 	left: -20px;
								// 	top: 0px;
								// 	width:0;
								// 	height: 0;
								// 	border-width: 10px;
								// 	border-style: solid; 
								// 	border-right-color: #63AEE8;
								// 	border-left-color: transparent;
								// 	border-top-color: transparent;
								// 	border-bottom-color: transparent;
								// }
							}

						}
						.fuchuang:before{
				             position: absolute;
				             content: "";
				             width: 0;
				             height: 0;
				             right: 100%;
				             top: 40%;
				             border-top: 6px solid transparent;
				             border-right: 10px solid #485465;
				             border-bottom: 6px solid transparent;
				         }
						span{
							// font-family: 'PingFangSC-Medium';
							// font-weight: 600;
							// font-size: 20px;
							color: #4D4D4D;
							margin-right: 15px;

						}
						.red{
							color: #EC7676 !important;
						}
					}
					.content_item:last-child{
						// cursor: pointer;
						position: relative;
						span{
							color: #fff;
							font-size: 14px;
							padding: 2px 15px 2px 10px;
							position: relative;
						}
						.flagErr {
							background: url('');background-repeat: no-repeat; width: 40px;display: inline-block;height: 30px; position: relative;top: 20px;
						}
						// i{
						// 	position: absolute;
						//    	left: -10px;
						// 	top:24px;
						// 	display: inline-block;
						// 	width: 0;
						//     height: 0;
						//     right: 100%;
						//     border-top: 10px solid transparent;
						//     border-right: 10px solid #89D769;
						//     border-bottom: 10px solid transparent;
						// }
						// span:before{
				    //          position: absolute;
				    //          content: "";
				    //          width: 0;
				    //          height: 0;
				    //          right: 100%;
				    //          top: 0px;
				    //          border-top: 10px solid transparent;
				    //          border-right: 10px solid #89D769;
				    //          border-bottom: 10px solid transparent;
				    //      }
					}
					.content_item:first-child{
						line-height: 20px;
						color: #4D4D4D;
						span{
							font-size: 14px;
							
							display: inline-block;
						}
						span:nth-child(1){
							//margin-top: 20px;
							font-size: 18px;
							line-height: 40px;
						}
						.el-button {
							position: absolute;
							left: 50%;
							top: 15px;
							margin-right: 20px;
							background: #67A8E6;
							border-color: #67A8E6;
							color: #fff;
						}
					}
				}
				.title{
					height: 63px;
					line-height: 63px;
					color: #6A6A6A;
					font-size: 14px;
					.title_item{
						float: left;
						width: 20%;
					}
					.title_item:first-child{
						margin-left: 20%;
					}
					.Line{
						margin-left: 7px;
						margin-right: 7px;
					}
				}
			}
		}
		.echarts_title{
			height: 55px;
			line-height: 55px;
			font-size: 17px;
			padding-left: 2.5%;
			padding-top:5px; 
			padding-bottom:8px; 
		}
		.el-checkbox__input.is-checked+.el-checkbox__label {
    		color: #000;
		}
		.el-checkbox {
			&:hover{
				color:#409EFF;
			}
		}
	}
</style>